<template>
  <!-- 门户首页 -->
  <div class="home">
    <!-- 轮播 -->
    <div class="home-banner">
      <van-swipe :autoplay="5000" @change="onChange">
        <van-swipe-item v-for="(image, index) in swipterImages" :key="index">
          <img v-lazy="image.image" class="home-image" />
        </van-swipe-item>
        <div class="custom-indicator" slot="indicator">
          <van-row>
            <van-col span="10" class="custom-indicator-tips"
              >王佳老师，下午好！</van-col
            >
            <van-col span="14">
              <i
                class="van-swipe__indicator"
                :key="index"
                :class="{ 'van-swipe__indicator--active': index == current }"
                v-for="(item, index) in swipterImages.length"
              ></i>
            </van-col>
          </van-row>
        </div>
      </van-swipe>
    </div>
    <!-- 各功能选择 -->
    <div class="service-type">
      <van-tabs
        v-model="active"
        swipeable
        color="transparent"
        :ellipsis="false"
      >
        <van-tab
          v-for="(item, index) in serviceTypeList"
          :key="index"
          :name="item.id"
        >
          <span
            slot="title"
            :class="{ 'active-tab-type': active == item.id }"
            class="vant-tab-type"
            >{{ item.name }}</span
          >
        </van-tab>
      </van-tabs>
    </div>
    <div class="service-wrap">
      <van-grid :border="false" :gutter="10">
        <!-- 当前获取服务信息小于8个 -->
        <van-grid-item
          :url="item.url"
          v-for="(item, index) in serviceList"
          :key="index"
          v-if="index < 7"
        >
          <van-image :src="item.serviceIcon" lazy-load />
          <span class="van-grid-item__text">{{ item.serviceName }}</span>
        </van-grid-item>
        <!-- 超过8个 -->
        <van-grid-item @click="moreServe" v-if="serviceList.length > 7">
          <van-image :src="require('@/assets/images/79.png')" lazy-load />
          <span class="van-grid-item__text">更多</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 重要提醒 -->
    <div class="important-tips">
      <div class="title-bar font32">重要提醒</div>
      <van-row gutter="10" class="item-wrap">
        <van-col span="12">
          <div class="important-item-1">
            <p class="font32">邮件</p>
            <p class="font24">
              未读邮件:&nbsp;
              <span v-if="importantForm.emails">
                <u>{{ importantForm.emails }}</u
                >封
              </span>
            </p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="important-item-2">
            <p class="font32">一卡通</p>
            <p class="font24">
              当前余额:&nbsp;
              <span v-if="importantForm.yicard">
                <u>{{ importantForm.yicard }}</u
                >元
              </span>
            </p>
          </div>
        </van-col>
        <!-- </van-row>
        <van-row gutter="10" class="item-wrap">-->
        <transition
          name="fade"
          enter-active-class="fadeIn"
          leave-active-class="fadeOut"
        >
          <div v-if="isShowMore">
            <van-col span="12">
              <div class="important-item-3">
                <p class="font32">我的图书</p>
                <p class="font24">
                  未还:&nbsp;
                  <span v-if="importantForm.book">
                    <u>{{ importantForm.book }}</u
                    >本，
                  </span>
                  <span v-if="importantForm.book">
                    <u>{{ importantForm.book }}</u
                    >本即将到期
                  </span>
                </p>
              </div>
            </van-col>
            <van-col span="12">
              <div class="important-item-4">
                <p class="font32">我的网费</p>
                <p class="font24">
                  网费:&nbsp;
                  <span v-if="importantForm.netWork">
                    <u>{{ importantForm.netWork }}</u
                    >元
                  </span>
                </p>
              </div>
            </van-col>
          </div>
        </transition>
      </van-row>
      <!-- 更多 -->
      <svg-icon
        icon-class="moreDown"
        class="mored-svg"
        @click="moreDown"
        :class="[isShowMore ? 'fade-up' : 'fade-in']"
      />
    </div>
    <!-- 校内公告 -->
    <Notice />
    <!-- 活动安排 -->
    <div class="activity-tips">
      <div class="title-bar font32">活动安排</div>
      <van-row
        class="item-wrap"
        v-for="(item, index) in activeInfo"
        :key="index"
      >
        <van-col span="4">
          <div class="activity-item-1">
            <p style="color: #BFBFBF">{{ item.year }}</p>
            <p>{{ item.weekDates }}</p>
            <p>{{ item.week }}</p>
          </div>
        </van-col>
        <van-col span="20">
          <div class="activity-item-2">
            <p>{{ item.title }}</p>
            <p class="active-specific">
              <svg-icon icon-class="clock" class="active-svg" />
              <span>{{ item.date }}</span>
              <svg-icon icon-class="signIcon" class="active-svg" />
              <span>{{ item.address }}</span>
            </p>
          </div>
        </van-col>
      </van-row>
      <!-- 更多活动安排 -->
      <div
        class="active-more font28"
        @click="skipRouter"
        v-if="activeInfoOld.length > 2"
      >
        {{ moreActiveInfo }} >
      </div>
    </div>
    <!-- 校内新闻 -->
    <News />
  </div>
</template>

<script>
import {
  queryEntList // 模糊搜索公司列表
} from '@/api/'
import { debounceFunction, removeStore } from '@config/utils'
import { mapActions } from 'vuex'
import Notice from '../xiaoneiNotice/index.vue' // 校内公告
import News from '../xiaoneiNews/index.vue' // 校内公告
import { util } from '@config/utils'

export default {
  name: 'home',
  components: {
    Notice,
    News
  },
  data() {
    return {
      // 轮播图
      swipterImages: [
        {
          image: require('@/assets/images/timg1.jpg')
        },
        {
          image: require('@/assets/images/timg2.jpg')
        },
        {
          image: require('@/assets/images/timg3.jpg')
        },
        {
          image: require('@/assets/images/timg4.jpg')
        }
      ],
      current: '0',
      // 功能种类
      serviceTypeList: [],
      // 当前选中种类
      active: 0,
      // 功能列表
      serviceList: [],
      // 重要提醒
      importantForm: {
        emails: 12,
        yicard: 200,
        book: '06',
        netWork: 1403.14
      },
      // 活动安排
      activeInfo: [],
      // 是否展示更多重要通知
      isShowMore: false,
      // 记录活动安排旧数据
      activeInfoOld: 0
    }
  },
  mounted() {
    this.getListInit() // 初始化数据信息
    console.log('JQuery测试',$('.important-tips').length)
  },
  watch: {
    // 监听当前选中种类
    active(val) {
      // 获取当前种类对应服务
      this.getServiceList(val)
    }
  },
  computed: {
    moreActiveInfo() {
      return this.activeInfo.length > 2 ? '收起活动安排' : '更多活动安排'
    }
  },
  methods: {
    // 初始化数据信息
    getListInit() {
      // 接口调用查询其种类和具体服务系统
      this.getServiceTypeList()
      // 获取活动安排
      this.getActivityList()
    },
    // 获取当前服务种类列表
    getServiceTypeList() {
      this.serviceTypeList = [
        {
          name: '个人业务专区',
          id: 1
        },
        {
          name: '人才培养专区',
          id: 2
        },
        {
          name: '办公业务专区',
          id: 3
        },
        {
          name: '其他专区1',
          id: 4
        },
        {
          name: '其他专区2',
          id: 5
        }
      ]
      // 查询当前列表下的服务
      this.active = this.serviceTypeList[0].id
    },
    // 获取对应服务种类对应列表
    getServiceList(id) {
      console.log(id)
      // 切换根据tab选中Id切换
      this.serviceList = [
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/87.png'),
          serviceName: '财务系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/88.png'),
          serviceName: 'OA系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/89.png'),
          serviceName: '教务系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/91.png'),
          serviceName: '邮件系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/93.png'),
          serviceName: '学年考核'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/91.png'),
          serviceName: '工会系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/92.png'),
          serviceName: 'istudent社区'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/90.png'),
          serviceName: '财务系统'
        },
        {
          url: 'http://www.baidu.com',
          serviceIcon: require('@/assets/images/92.png'),
          serviceName: 'istudent社区'
        }
      ]
    },
    // 服务跳转
    moreServe() {
      this.$router.push({
        path: '/page/Home/sysTemApplication',
        query: {
          type: 1
        }
      })
    },
    // 获取活动安排
    getActivityList() {
      this.activeInfo = [
        {
          year: '2017年',
          weekDates: '20周',
          week: '星期三',
          title: '大兴校区体育馆竣工暨 2017级新生开学典礼 协调会',
          date: '08:30',
          address: '西城校区 第七会议室'
        },
        {
          year: '2017年',
          weekDates: '21周',
          week: '星期三',
          title: '党支部书记培训结业式',
          date: '13:30',
          address: '西城校区 第七会议室'
        },
        {
          year: '2017年',
          weekDates: '22周',
          week: '星期三',
          title: '党支部书记培训结业式',
          date: '13:30',
          address: '西城校区 第七会议室'
        },
        {
          year: '2019年',
          weekDates: '23周',
          week: '星期三',
          title: '大兴校区体育馆竣工暨 2017级新生开学典礼 协调会',
          date: '08:30',
          address: '西城校区 第七会议室'
        },
        {
          year: '2019年',
          weekDates: '24周',
          week: '星期三',
          title: '大兴校区体育馆竣工暨 2017级新生开学典礼 协调会',
          date: '08:30',
          address: '西城校区 第七会议室'
        }
      ]
      // 设置超过两条隐藏
      this.activeInfoOld = util.deepCopy(this.activeInfo)
      this.activeInfoOld.length > 2 ? (this.activeInfo.length = 2) : ''
    },
    // 轮播设置
    onChange(index) {
      this.current = index
    },
    // 重要通知更多
    moreDown() {
      this.isShowMore = !this.isShowMore
    },
    // 活动安排 超过两条隐藏
    skipRouter() {
      if (this.activeInfo.length <= 2) {
        this.activeInfo = util.deepCopy(this.activeInfoOld)
      } else {
        this.activeInfo.splice(2, this.activeInfo.length)
      }
    }
  }
}
</script>
<style lang="less">
.fade-in {
  transition: all 0.5s;
}
.fade-up {
  transform: rotate(-180deg);
  transition: all 0.5s;
}
/* 门户首页 */
.home {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  &-image {
    width: 100%;
  }
  &-banner {
    height: 167px;
    .van-swipe-item {
      height: 167px !important;
    }
  }
  /* 自定义滑动块 */
  .custom-indicator {
    position: absolute;
    width: 100%;
    left: 0;
    padding: 10px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.74);
    font-size: @fontSize24;
    &-tips {
      color: #fff;
    }
    /* 滑动块位置 */
    .van-col--14 {
      text-align: right;
      padding-right: 20px;
    }
    /* 滑动块 */
    .van-swipe__indicator {
      display: inline-block;
      width: 20px;
      height: 3px;
      border-radius: 0;
      cursor: pointer;
      background-color: #f7d06e;
    }
  }
  /* 功能文字 */
  .service-type {
    padding: 1.1vh 0 0;
    .van-tab {
      line-height: 16px;
      .vant-tab-type {
        border-radius: 4px;
        padding: 8px 9px;
        height: 32px;
        &.active-tab-type {
          color: #fff;
          background: rgba(106, 71, 129, 1);
        }
      }
    }
    [class*='van-hairline']::after {
      position: static !important;
    }
  }
  /* 服务项 */
  .service-wrap {
    padding: 10px 0;
    border-top: 0.5px solid #e6e6e8;
    border-bottom: 10px solid #e5e5e7;
    .van-grid-item__text {
      padding-top: 9px;
      width: 15vw;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .van-grid-item__content {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  // 重要提醒
  .important-tips {
    // height: 133px;
    position: relative;
    border-bottom: 10px solid #e5e5e7;
    .item-wrap {
      padding: 0 10px;
      padding-bottom: 20px;
      .van-col {
        margin-bottom: 10px;
      }
    }
    .important-item-4,
    .important-item-3,
    .important-item-2,
    .important-item-1 {
      padding: 6px 10px 10px;
      height: 66px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #a2dcae url('../../../assets/images/email.png') no-repeat 95%
        6px;
      // background-position: 0rem 0.44rem;
      background-size: 53px 53px;
      p {
        color: #fff;
        &:first-of-type {
          padding-bottom: 18px;
        }
        &:last-of-type {
          span {
            display: inline-block;
            color: #fff;
          }
        }
      }
    }
    .important-item-2 {
      background: #98dafc url('../../../assets/images/yikat.png') no-repeat 95%
        6px;
      background-size: 53px 53px;
    }
    .important-item-3 {
      background: #e09481 url('../../../assets/images/book.png') no-repeat 95%
        6px;
      background-size: 53px 53px;
    }
    .important-item-4 {
      background: #cbc2ab url('../../../assets/images/network.png') no-repeat
        95% 6px;
      background-size: 53px 53px;
    }
    // 更多按钮
    .mored-svg {
      width: 13px;
      height: 13px;
      position: absolute;
      bottom: 7px;
      left: 50%;
      margin-left: -6.5px;
    }
  }
  // 活动安排
  .activity-tips {
    position: relative;
    border-bottom: 10px solid #e5e5e7;
    .title-bar {
      &::before {
        background: url('../../../assets/icon/tips1.png') no-repeat center/100%
          100%;
      }
    }
    .item-wrap {
      position: relative;
      padding: 12px;
      margin-bottom: 9px;
      color: #909090;
      &:nth-of-type(odd) {
        border-left: 2px solid #ffd35e;
        background-color: #fffaec;
      }
      &:nth-of-type(even) {
        border-left: 2px solid #a1dcae;
        background-color: #f3fffb;
      }
      .activity-item-1 {
        text-align: center;
        border-right: 0.5px solid #e1e1e1;
        margin-right: 6px;
        p {
          font-size: 10px;
          &:nth-of-type(2) {
            font-size: 15px;
            color: #595959;
          }
          &:nth-of-type(3) {
            color: #777272;
          }
        }
      }
      .activity-item-2 {
        p {
          font-size: 11px;
          &:nth-of-type(1) {
            font-size: 13px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
          }
          &:nth-of-type(2) {
            color: #909090;
          }
          .active-svg {
            margin-right: 5px;
            display: inline-block;
            vertical-align: middle;
          }
        }
        // 活动具体时间
        .active-specific {
          position: absolute;
          bottom: 10px;
          width: 100%;
          span {
            display: inline-block;
            vertical-align: middle;
            padding-right: 26px;
            color: #909090;
          }
        }
      }
    }
    .active-more {
      color: #a1dcae;
      text-align: center;
      padding: 2px 0 16px;
    }
  }
  // title-bar
  .title-bar {
    position: relative;
    padding: 10px 18px;
    color: #595959;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      width: 10px;
      height: 20px;
      background: url('../../../assets/icon/tips2.png') no-repeat center/100%
        100%;
    }
  }
}
</style>
